<template>
	<!-- 任务详情 -->
	<div class="task">
		<Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
		<div class="taskContent">
			
			<div class="taskTitle">
				<div class="taskTitleText">
					—— 专项监督创建任务时的标题展示 ——
				</div>
			</div>

			<div class="tableHeadContent">
				<div class="tableHead">
					<el-table :data="tableData" border style="width: 100%;" tooltip-effect="dark">
						<el-table-column prop="type" label="任务类型" align="center" :span="6">
						</el-table-column>
						<el-table-column prop="name" label="联系人" align="center" :span="6">
						</el-table-column>
						<el-table-column prop="information" label="联系方式" align="center" :span="6">
						</el-table-column>
						<el-table-column prop="progress" label="完成进度" align="center" :span="6">
						</el-table-column>
					</el-table>
				</div>
				<div class="tableHeadText">
					<!-- <textarea class="tableHeadTextContent">
				 的萨克斯的卡萨丁开课啦收到货了卡都换了卡还打了卡还是打了卡哈施蒂利克had离开哈克里斯多哈伦裤三打哈克鲁赛德
				    </textarea> -->
					<div class="tableHeadTextContent">
					<el-input
					  type="textarea"
					  readonly="true"
					  autosize
					  :value="textarea">
					</el-input>
					</div>
				</div>

			</div>

			<div class="taskMid">
				<div class="taskMidName">
					<div class="taskMidNameLeft"></div>
					<div class="taskMidNameRight">附件</div>
				</div>

				<div class="taskMidFile">

					<div v-if="fileList.length" class="taskMidFileConter" v-for="(item,index) in fileList" :key="item.id">
						<div class="taskMidFileConterSon">
							<div class="taskMidFileConterSonLeft">
								<img src="../../../../assets/image/dog.png"></img>
							</div>
							<div class="taskMidFileConterSonRight">
								<div class="sonRightTop">{{item.name}}</div>
								<div class="sonRightBot">
									<div class="sonRightBotLeft">{{item.size}}</div>
									<div class="sonRightBotRight">
										<img class="sonRightBotRightImg" src="../../../../assets/image/preview.png" @click="previewFile(item.id)"></img>
										<div class="sonRightBotRightText">预览</div>
										<div class="sonRightBotRightLine"></div>
										<img class="sonRightBotRightInmage" src="../../../../assets/image/download.png" @click="downloadFile(item.id)"></img>
										<div class="sonRightBotRightText">下载</div>
									</div>
								</div>
							</div>
						</div>	
					</div>
					
				
				
				</div>
			</div>

			<div class="taskBotAll">
				<div class="taskBotAllTop">
					<div class="taskBotName">
						<div class="taskBotNameLeft"></div>
						<div class="taskBotNameRight">汇报情况</div>
					</div>
					<div class="taskBotButton">下载全部</div>
				</div>


				<div class="taskBotAllBot">
					<el-table :data="tableList" border style="width: 100%" tooltip-effect="dark">
						<el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
						<el-table-column prop="company" label="公司/部门" align="center" width="308"></el-table-column>
						<el-table-column prop="report" label="情况报告名称" align="center" width="367"></el-table-column>
						<el-table-column prop="overtime" label="是否超时" align="center" width="190"></el-table-column>
						<el-table-column prop="reportingTime" label="汇报时间" align="center" width="320"></el-table-column>
						<el-table-column label="操作" align="center" width="300">
							<template slot-scope="scope">
								<div class="taskBotAllBotScop">
									<el-button type="info" size="small" @click="seeInfo(scope.row.id)">查看</el-button>
									<Urging :clearOne="clearOne" :id="scope.row.id"></Urging>
									<el-button type="primary" size="small" @click="download(scope.row.id)">下载</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>

					<div class="fenye">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum"
						 background :page-sizes="[2, 5,10]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper"
						 :total="total"></el-pagination>
					</div>

				</div>

			</div>


		</div>
	</div>
</template>
<script>
	import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
	import Urging from "../../../../components/Popup/Urging.vue";
	export default {
		components: {
			Breadcrumb,Urging
		},
		data() {
			return {
				tableData: [{
					type: '自查自纠',
					name: '王小虎',
					information: '13376055619',
					progress: '10/10'
				}],
				tableList: [{
						company: 'A公司',
						report: '关于B开展反四风',
						overtime: '是',
						reportingTime: '2017-10-01 12:00:00'
					},
					{
						company: 'B公司',
						report: '关于B开展反四风',
						overtime: '是',
						reportingTime: '2017-10-01 12:00:00'
					},
					{
						company: 'C公司',
						report: '关于B开展反四风',
						overtime: '是',
						reportingTime: '2017-10-01 12:00:00'
					},
					{
						company: 'D公司',
						report: '关于B开展反四风',
						overtime: '否',
						reportingTime: '2017-10-01 12:00:00'
					},
				],
				params: {
					pageNum: 1,
					pageSize:10
				},
				total: 10,
				textarea:'撒大萨达所多撒多撒大所大所大所大所多撒奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥奥',
				//面包靴跳转数据
				Breadcrumb:[{
					name:"监督举报",
					link:""
				},{
					name:"专项监督",
					link:""
				},{
					name:"任务管理",
					link:""
				},{
					name:"任务详情",
					link:""
				}],
				fileList: [{
						id: 1,
						name: "举报文档信息01.PDF青蔷薇群翁群翁群翁",
						size: "11.6M",
						pic: "../../../../assets/image/dog.png"
					},
					{
						id: 2,
						name: "举报文档信息01.PDF",
						size: "11.6M",
						pic: "../../../../assets/image/dog.png"
					},
					{
						id: 3,
						name: "举报文档信息01.PDF",
						size: "11.6M",
						pic: "../../../../assets/image/dog.png"
					},
					{
						id: 4,
						name: "举报文档信息01.PDF",
						size: "11.6M",
						pic: "../../../../assets/image/dog.png"
					},
					{
						id: 5,
						name: "举报文档信息01.PDF",
						size: "11.6M",
						pic: "../../../../assets/image/dog.png"
					}
				
				]




			};
		},
		methods: {
			clearOne() {

			},
			handleSizeChange() {

			},
			handleCurrentChange() {

			},
			seeInfo(id) {
                this.$router.push("/index/SuperviseAndReport/Task/DetailsOne");
			},
			download(id) {

			},

		},
	};
</script>
<style lang="less" scoped>
	.task {
		width: 100%;
		height: 100%;

		.taskContent {
			// margin: 20px;

			.taskHead {
				width: 100%;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.taskHeadBack {
					height: 36px;
					width: 70px;
					background-color: #FFFFFF;
					color: #333333;
					font-size: 14px;
					line-height: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor:pointer;

				}

				.taskHeadText {
					color: #666666;
					font-size: 14px;
					line-height: 22px;

				}
			}

			.taskTitle {
				height: 30px;
				width: 100%;
				margin-top: 36px;
				margin-bottom: 24px;
				display: flex;
				align-items: center;
				justify-content: center;

				.taskTitleText {
					height: 30px;
					width: 500px;
					text-align: center;
					color: #333333;
					font-weight: 600;
					font-size: 22px;
					line-height: 30px;
				}
			}

			.tableHeadContent {

				padding-top: 20px;
				padding-bottom: 20px;
				background-color: #FFFFFF;
   

				.tableHead {
					margin: 20px;
				}

				.tableHeadText {
					margin-bottom: 15px;
					width: 100%;
					height: auto;
					display: flex;
					justify-content: center;

				}
			}

			.taskMid {
				padding-top: 20px;
				padding-bottom: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.taskMidName {
					height: 18px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;

					.taskMidNameLeft {
						width: 4px;
						height: 14px;
						background: #3D7fff;
						margin-right: 10px;
					}

					.taskMidNameRight {
						font-weight: 600;
						color: #333333;
						font-size: 16px;
						line-height: 16px;
					}
				}

				.taskMidFile {
					margin-top: 20px;
					margin-left: 20px;
					margin-right: 20px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.taskMidFileConter {
						height: 80px;
						width: 360px;
						border: 1px #DDDDDD solid;
						border-radius: 4px;
						margin-right: 10px;
						margin-bottom: 10px;;

						.taskMidFileConterSon {
							height: 50px;
							margin: 15px;
							display: flex;

							.taskMidFileConterSonLeft {
								height: 50px;
								width: 50px;
								img{
									height: 50px;
									width: 50px;
								}
							}

							.taskMidFileConterSonRight {
								width: 265px;
								height: 50px;
								margin-left: 15px;

								.sonRightTop {
									height: 32px;
									color: #333333;
									font-size: 16px;
									line-height: 16px;
									display: flex;
									align-items: center;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									overflow: hidden;
									text-overflow: ellipsis;
									-webkit-box-orient: vertical;
								}

								.sonRightBot {
									height: 25px;
									display: flex;
									align-items: center;
									justify-content: space-between;

									.sonRightBotLeft {
										width: 70px;
										height: 16px;
										color: #999999;
										font-size: 14px;
										line-height: 16px;
									}

									.sonRightBotRight {
										width: 150px;
										height: 16px;
										color: #3D7FFF;
										font-size: 14px;
										line-height: 16px;
										display: flex;
										align-items: center;
										justify-content: flex-end;

										.sonRightBotRightImg {
											height: 12px;
											width: 16px;
											cursor:pointer;
										}

										.sonRightBotRightText {
											height: 16px;
											width: 30px;
											margin-left: 5px;
											
										}

										.sonRightBotRightLine {
											margin-left: 15px;
											margin-right: 15px;
											width: 1px;
											height: 12px;
											background: #CCCCCC;
										}

										.sonRightBotRightInmage {
											height: 12px;
											width: 14px;
											cursor:pointer;
										}

									}

								}
							}
						}
					}
				}

			}

			.taskBotAll {
				padding-top: 20px;
				padding-bottom: 20px;
				margin-top: 20px;
				background-color: #FFFFFF;

				.taskBotAllTop {
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 20px;

					.taskBotName {
						height: 18px;
						width: 100px;
						margin: 20px;
						display: flex;
						align-items: center;

						.taskBotNameLeft {
							width: 4px;
							height: 14px;
							background: #3D7fff;
							margin-right: 10px;
						}

						.taskBotNameRight {
							font-weight: 600;
							color: #333333;
							font-size: 16px;
							line-height: 16px;
						}
					}

					.taskBotButton {
						height: 36px;
						width: 88px;
						background-color: #3D7FFF;
						color: #FFFFFF;
						font-size: 14px;
						line-height: 22px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 4px;
						cursor:pointer;
					}
				}

				.taskBotAllBot {
					margin: 20px;

					.taskBotAllBotScop {
						display: flex;
						align-items: center;
						justify-content: center;

						.taskBotAllBotScopButton {
							height: ;
							color: #333333 !important;
							font-size: 14px;
							line-height: 22px;
							background-color: #FFFFFF !important;

						}
					}

				    .fenye{
						display: flex;
						align-items: center;
						justify-content: center;
						/deep/.is-background{
							margin-top: 30px;
						}
						/deep/.el-input__inner{
							height: 28px;
						}
					}
				}
			}

		}

		/deep/.el-button--info {
			width: 60px;
			height: 28px;
			background: rgba(255, 255, 255, 1);
			border-radius: 4px;
			border: 1px solid rgba(221, 221, 221, 1);
			color: #333333;
			font-size: 14px; 
			line-height: 22px;
			margin-right: 20px;
			padding: 0;
			
            
		}

		/deep/.el-button--primary {
			width: 60px;
			height: 28px;
			background: rgba(61, 127, 255, 1);
			border-radius: 4px;
			color: #FFFFFF;
			font-size: 14px;
			line-height: 22px;
			margin-left: 20px;
			padding: 0;
			
		}
		
		
		/deep/.el-textarea__inner{
			width: 1080px;
			border-color: #FFFFFF;
			resize:none;
			
		}
		/deep/.el-pagination .is-background{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
